<template>
  <div>
    <img :src="list[0].img" alt="" />
    <h3>{{ list[0].content }}</h3>
    <p>
      <span>{{ list[0].price }}</span>
      <span>{{ "已售" + list[0].num }}</span>
    </p>
    <button @click="add">加入购物车</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$axios.get("/list.json").then((res) => {
      this.list = res.data;
      this.list = this.list.filter((item) => {
        if (item.id == this.$route.query.id) {
          return item;
        }
      });
    });
  },
  methods: {
      add(){
          
      }
  },
};
</script>
<style lang="scss" scoped>
    img{
        width: 100%;
    }
    h3{
        margin: 0;
    }
    p{
        margin: 0;
    }
</style>